<template>
    <base-content>
        <div class="row base-card-shadow" style="margin: 8px;background-color: white">
          <div class="col-md-5 col-sm-5 col-xs-12" style="border-right: 1px solid rgba(0,0,0,0.12)">
              <div class="flex justify-between align-center items-center" style="font-size: 1.32rem;margin: 15px;">
                <span class="text-weight-bold">系统菜单</span>
                <div>
                  <q-btn color="primary" :loading="loading" icon="add" label="新增" style="margin: 0 20px 0 0" @click="handleAdd"/>
                  <q-btn color="secondary" :loading="loading" icon="refresh" label="刷新" style="margin: 0 20px 0 0" @click="handleReset"/>
                  <q-btn v-if="currentSelect && currentSelect.key" :loading="loading" color="red" icon="remove" label="删除" style="margin: 0 20px 0 0" @click="confirm = !confirm"/>
                </div>
              </div>
              <q-separator/>
              <div style="margin: 0 0 0 20px">
                <q-scroll-area ref="scrollArea" style="height: calc(95vh - 124px);" :thumb-style="thumbStyleOfMenu">
                  <q-tree
                    :nodes="baseRouter.baseR"
                    node-key="key"
                    default-expand-all
                    :selected.sync="baseRouter.selected"
                    ref="urlTree"
                  >
                    <template v-slot:default-header="prop" >
                      <div class="row items-center" style="width: 100%">
                        <q-icon :name="prop.node.meta.icon || 'share'" class="q-mr-sm" />
                        <div >{{ prop.node.meta.title }}</div>
                      </div>
                    </template>
                  </q-tree>
                </q-scroll-area>
              </div>
          </div>
          <div class="col" style="border-left: 1px solid rgba(0,0,0,0.12)" v-if="currentSelect && currentSelect.key">
            <div class="flex justify-between align-center items-center" style="font-size: 1.32rem;margin: 15px;height: 36px">
              <span class="text-weight-bold">配置：{{currentSelect.meta.title}}</span>
            </div>
            <q-separator/>
            <div style="margin: 20px">
              <div class="q-gutter-sm">
                <q-input v-model="currentSelect.meta.title" label="菜单标题" />
                <q-input v-model="currentSelect.name" label="菜单编码" />
                <q-input v-model="currentSelect.meta.icon" label="菜单图标" />
                <q-input v-model="currentSelect.path" label="菜单路径" />
                <q-input v-model="currentSelect.component" label="组件路径" />
                <q-input v-model.number="currentSelect.meta.order" type="number" label="顺序" />
                <q-input v-model="currentSelect.meta.desc" label="描述" />
                <q-checkbox v-model="currentSelect.meta.hidden" label="是否展示" color="teal" />
                <q-checkbox v-model="currentSelect.meta.keepAlive" label="是否缓存" color="teal" />
              </div>
            </div>
            <q-separator/>
            <div style="margin: 20px">
              <div class="q-gutter-sm">
                <q-btn color="primary" label="保存" @click="handleSubmit"/>
                <q-btn color="white" text-color="black" label="取消" @click="handleReset"/>
              </div>
            </div>
          </div>
        </div>
        <q-dialog v-model="confirm" persistent>
          <q-card>
            <q-card-section class="row items-center">
              <q-avatar icon="do_not_disturb_on" color="primary" text-color="white" />
              <span class="q-ml-sm">确认要删除菜单？</span>
            </q-card-section>

            <q-card-actions align="right">
              <q-btn flat label="确定" color="primary" v-close-popup @click="handleRemove"/>
              <q-btn flat label="取消" color="primary" v-close-popup @click="confirm = !confirm"/>
            </q-card-actions>
          </q-card>
        </q-dialog>

    </base-content>
</template>

<script>
import { thumbStyleOfMenu } from '../../components/BaseContent/ThumbStyle'
import BaseContent from '../../components/BaseContent/BaseContent'
import { getAllUrlTree, removeUrl, updateUrl, saveUrl } from 'src/api/url/UrlApi'
import { uuid } from 'vue-uuid'

export default {
  name: 'url',
  components: { BaseContent },
  data () {
    return {
      thumbStyleOfMenu,
      currentSelect: {},
      confirm: false,
      // 基础路由数据
      baseRouter: {
        baseR: [],
        selected: {},
        ticked: []
      },
      loading: false
    }
  },
  mounted () {
    this.getUserR()
  },
  watch: {
    'baseRouter.selected': {
      handler (n) {
        this.currentSelect = this.$refs.urlTree.getNodeByKey(n)
      },
      deep: true
    }
  },
  methods: {
    getUserR () {
      getAllUrlTree().then(res => {
        this.baseRouter.selected = {}
        this.baseRouter.baseR = res.data.result
        console.log(this.currentSelect)
      }).catch(error => {
        console.log(error)
      })
    },
    handleReset () {
      this.getUserR()
    },
    handleAdd () {
      const key = 'temp_' + uuid.v4()
      let parentId = ''
      if (this.currentSelect.key) {
        parentId = this.currentSelect.key
      }
      const newNode = { key: key, name: '', path: '', component: '', parentId: parentId, meta: { title: '', icon: '', order: 1, hidden: true, keepAlive: true, desc: '' } }
      if (this.currentSelect.key) {
        if (this.currentSelect.children === null) {
          this.currentSelect.children = []
        }
        this.currentSelect.children.push(newNode)
        if (!this.$refs.urlTree.isExpanded(this.currentSelect.key)) {
          this.$refs.urlTree.setExpanded(this.currentSelect.key, 1)
        }
      } else {
        this.baseRouter.baseR.push(newNode)
      }
      this.baseRouter.selected = key
    },
    handleRemove () {
      this.loading = !this.loading
      removeUrl(this.currentSelect.key).then(res => {
        this.loading = !this.loading
        if (res.data.code === 200) {
          this.$q.notify({
            icon: 'insert_emoticon',
            message: res.data.message,
            color: 'green',
            position: 'top',
            timeout: 1500
          })
        } else {
          this.$q.notify({
            icon: 'announcement',
            message: res.data.code + ':' + res.data.message,
            color: 'red',
            position: 'top',
            timeout: 1500
          })
        }
        this.getUserR()
      })
    },
    handleSubmit () {
      this.loading = !this.loading
      if (this.currentSelect.key.startsWith('temp_')) {
        saveUrl(this.currentSelect).then(res => {
          this.loading = !this.loading
          if (res.data.code === 200) {
            this.$q.notify({
              icon: 'insert_emoticon',
              message: res.data.message,
              color: 'green',
              position: 'top',
              timeout: 1500
            })
          } else {
            this.$q.notify({
              icon: 'announcement',
              message: res.data.code + ':' + res.data.message,
              color: 'red',
              position: 'top',
              timeout: 1500
            })
          }
          this.getUserR()
        })
      } else {
        updateUrl(this.currentSelect).then(res => {
          this.loading = !this.loading
          if (res.data.code === 200) {
            this.$q.notify({
              icon: 'insert_emoticon',
              message: res.data.message,
              color: 'green',
              position: 'top',
              timeout: 1500
            })
          } else {
            this.$q.notify({
              icon: 'announcement',
              message: res.data.code + ':' + res.data.message,
              color: 'red',
              position: 'top',
              timeout: 1500
            })
          }
          this.getUserR()
        })
      }
    }
  }
}
</script>
